<!--
 * @Author: 陈永浩(cyh1231wp@163.com)
 * @Date: 2021-02-20 17:55:59
 * @LastEditors: 陈永浩(cyh1231wp@163.com)
 * @LastEditTime: 2021-02-23 22:29:38
-->
<template>
  <div class="layout bg_duck">
    <Layout>
      <Header class="header" :style="{ background: '#fff' }">
        <div class="flex flex-between flex-items-center">
          <div class="flex flex-items-center">
            <img src="@/assets/logo.png" class="logo">
            <div class="vertical-line"></div>
            <span>选择应用</span>
          </div>

          <div>
            <span class="link cursor-pointer" style="margin-right: 20px" @click="toSettings">设置</span>
            <span class="cursor-pointer" @click="logout">退出</span>
          </div>
        </div>
      </Header>
      <Content>
        <div class="container">
          <div class="header flex flex-items-center">
            <Avatar class="avatar flex flex-items-center">{{adminInfo.name[0].toUpperCase()}}</Avatar>
            <div>
              <div class="nickname">
                {{adminInfo.nickname || '暂无昵称'}}
              </div>
              <div class="username">
                {{adminInfo.name}}
              </div>
            </div>
          </div>

          <div class="content">
            <div class="app-list flex flex-wrap">
              <div class="app-item flex flex-items-center " v-for="(item,index) in appList" @click="toApp(index)">
                <div>
                  <img class="app-img" :src="item.img_url">
                </div>
                <div class="app-body">
                  <div class="app-name">
                    {{item.name}}
                  </div>
                  <div class="app-desc">
                    {{item.desc}}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </Content>

    </Layout>
  </div>
</template>

<script>
import { getAppList } from "@/api/system/public";
import { setCache, removeCache } from "@/utils/sessionCache";
export default {
  data() {
    return {
      adminInfo: JSON.parse(sessionStorage.getItem("adminInfo")),
      appList: [],
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      getAppList().then((res) => {
        this.appList = res.data;
      });
    },
    logout() {
      sessionStorage.clear();
      this.$router.push("/login");
    },
    toSettings() {
      removeCache("appId");
      this.$router.push("/settings");
    },
    toApp(index) {
      const appId = this.appList[index].id;
      setCache("appId", appId);
    },
  },
};
</script>

<style lang="scss" scoped>
.logo {
  width: 42px;
  height: 42px;
}

.container {
  min-height: calc(100vh - 150px);
  background-color: #ffffff;
  margin: 32px;
  .header {
    padding: 24px;
    border-bottom: #dadada 1px solid;
    .avatar {
      width: 50px;
      height: 50px;
      margin-right: 20px;
    }
    .nickname {
      font-weight: bold;
      margin-bottom: 5px;
    }
    .username {
      color: $base-color-gray;
    }
  }

  .content {
    margin: 32px;
    .app-list {
      .app-item {
        border: #dadada 1px solid;
        border-radius: 5px;
        margin: 10px;
        padding: 10px;
        width: 30%;
        cursor: pointer;
        .app-img {
          width: 50px;
          height: 50px;
          border-radius: 10px;
        }
        .app-body {
          margin-left: 10px;
          .app-name {
            font-size: 16px;
            font-weight: bold;
          }
          .app-desc {
            margin-top: 5px;
          }
        }
      }
      .app-item:hover {
        background-color: #f8f8f8;
      }
    }
  }
}
</style>
